<style lang=less>
	@import './exchange.less';
	.exchange {
		.HistoricalEntrustment .gg_order_wrapper .order_container {
			min-width: 1000px;
		}
		.HistoricalEntrustment #tab-third {
			display: none;
		}
		.HistoricalEntrustment .headertongji {
			display: none;
		}
		.bb_order_wrapper {
			.order_container {
				width: 100%;
				padding-top: 10px;
				margin: 0;
				max-width: 100%;
			}
			.right {
				display: none;
			}
		}
	}
</style>
<template>
	<div class="exchange">
		<!--k线 star-->
		<div class="klinAndTring">
			<div class="exchange_mian">
				<div class="big" @click="quanping">
					<img src="../../assets/image/big.png" />
				</div>
				<Quotationheader :Marketheader="Marketdataheader"></Quotationheader>
				<!--k 线-->
				<section class="kine" id="kk">
					<iframe :src="'./static/index.html?code=' + marketPurchase.code" width="100%" height="800px;" id="fram"></iframe>
				</section>
			</div>
			<!--k线end-->

			<!--右边导航 star-->
			<div class="exchange_nav">
				<div class="topWarp">
					<!--币种 star-->
					<section class="nav_list">
						<h2 class="currency_header">
				  		<p>USDT</p>
				  	</h2>
						<h3 class="currency_surface_header">
						<!--币种-->
			      		<p class="currency_surface_list">{{$t("bibi.usdt[0]")}}</p> 
			      		<!--最新价-->
			      		<p class="currency_surface_list">{{$t("bibi.usdt[1]")}}</p> 
			      		<!--涨幅-->
			      		<p class="currency_surface_list">{{$t("bibi.usdt[2]")}}</p>
			      	</h3>
						<Quotation :Marketmain='Marketdatamain' @modifyfun="modifyshuju"></Quotation>
						<section class="Innovate_box"></section>
					</section>
					<!--币种end-->

					<!--推送star-->
					<section class="transaction_main">

						<div class="transaction_mainHeader">

							<span class="newPrice">
								<!--最新价-->
								{{$t("bibi.by[0]")}}{{Marketdataheader.price}}
							</span>
							<span class="changeCny">
								≈ {{Marketdataheader.cnyPrice}}CNY
							</span>

						</div>

						<div class="transaction_mainConnent" v-if='PurchaseData'>
							<h3 class="transaction_nav">
								<!--盘口-->
						    	<p class="PurchaseData_name">{{$t("bibi.by[1]")}}</p>
						    	<!--价格-->
						   	 	<p class="PurchaseData_name">{{$t("bibi.by[2]")}}</p>
						   	 	<!--数量-->
						    	<p class="PurchaseData_name">{{$t("bibi.by[3]")}}</p>
							</h3>
							<ul class="PurchaseData">
								<li class="PurchaseData_list" v-for="(item, index) in PurchaseData.sell" @click="PriceSwitchingpurchase(index,'sell')">
									<p class="PurchaseData_name down" style="color: #00bd82;">{{$t("bibi.by[4]")}}{{ PurchaseData.sell.length - index}}</p>
									<p class="PurchaseData_name">{{item.price}}</p>
									<p class="PurchaseData_name">{{item.totalSize}}</p>
								</li>
							</ul>
							<ul class="SelloutData">
								<li class="PurchaseData_list" v-for="(item, index) in PurchaseData.buy" @click="PriceSwitchingpurchase(index,'buy')">
									<p class="PurchaseData_name " style="color: #ff5855;">{{$t("bibi.by[5]")}}{{index+1}}</p>
									<p class="PurchaseData_name">{{item.price}}</p>
									<p class="PurchaseData_name">{{item.totalSize}}</p>
								</li>
							</ul>
						</div>
						<div class="transaction_mainConnent loading" v-else>
							<img src="../../assets/image/timg.gif" width="80" />
							<p style="color:#999;font-size: 12px; text-align: center;">{{$t("bibi.loading")}}</p>
						</div>
					</section>

					<!--推送end-->
				</div>

				<section class="transaction">
					<div class="transaction_box">
						<!--<span class="canuser">
						动态权益: {{tongjiData.totalusdt}} &nbsp;&nbsp;&nbsp;&nbsp;
						可用资金: {{tongjiData.keyong_price}}
					</span>-->
						<el-tabs v-model="activeName">
							<!--市价交易-->
							<el-tab-pane :label="$t('bibi.priceNav[0]')" name="first">
								<Sellout @changeData="listenToMyBoy" :ModifyState='true' :Data='marketPurchase'></Sellout>
								<Purchase @changeData="listenToMyBoy" :ModifyState='true' :Data='marketPurchase'></Purchase>
							</el-tab-pane>
							<!--限价交易-->
							<el-tab-pane :label="$t('bibi.priceNav[1]')" name="second">
								<Sellout @changeData="listenToMyBoy" :ModifyState='false' :Data='marketPurchase'></Sellout>
								<Purchase @changeData="listenToMyBoy" :ModifyState='false' :Data='marketPurchase'></Purchase>
							</el-tab-pane>
						</el-tabs>
					</div>

				</section>

			</div>
			<!--右边导航end-->
		</div>
		<!--当前委托 star-->
		<section class="HistoricalEntrustment">
			<bbOrder @changeData="listenToMyBoy" ref="offTime"></bbOrder>
		</section>
		<!--当前委托  end-->
	</div>
</template>
<script>
	import Purchase from "./transaction/purchase.vue";
	import Sellout from "./transaction/sellout.vue";
	import Quotation from "./Quotation.vue";
	import Quotationheader from "./Quotationheader.vue";
	//	import Currententrustmen from "./Currententrustmen.vue"; //委托
	import bbOrder from "../order/bbOrder.vue"; //委托

	export default {
		data() {
			return {
				activeName: 'first', //默认市价还是限价更改
				setInter: null,
				//给组建传的值
				marketPurchase: {
					syb: 0, //币的数量
					PriceData: 0, //最新价
					wallone: 0, //用户资产余额
					spread: 0, //点差
					var_price: 0, //最小浮动价
					trans_fee: 0, //手续费
					stopwin: 0, //止盈
					stoploss: 0, //止损
					num_min: 0, //最小购买量
					leverage: 0, //杠杆
					buyorsell: '',
					code: 'btc_usdt', //控制code 重要字段不可随意更改
				}, //市价买入
				Marketdatamainbox: {}, //行情主数据盒子
				Marketdatamain: {}, //行情主数据
				PurchaseData: null, //买卖价数据
				Marketdataheader: {}, //K线图顶部的数据
				tableData: [],
				MainData: null, //主数据推送
				SalePriceData: null, //买卖价推送
				tongjiData: {
					keyong_price: '--', //可用资金
					totalusdt: '--', //动态权益
					totaldeposit: '--', //冻结保证金
					yingkui: '--', //浮动盈亏
					risk: '--' //风险率
				}

			}
		},
		watch: {},
		methods: {
			//要刷新的数据放在这个函数里面
			listenToMyBoy() {
				this.getdatamain();
				this.amount(); //个人资产数据
				this.$refs.offTime.offTime();
			},
			onSubmit: function() {},
			modifyshuju: function(envent) { //nav点击时修改
				var _this = this;
				_this.marketPurchase.code = envent;
				for(var i = 0; i < _this.Marketdatamainbox.length; i++) {
					if(_this.Marketdatamainbox[i].code == envent) {
						_this.Marketdataheader = _this.Marketdatamainbox[i];
						_this.marketPurchase.PriceData = Number(_this.Marketdatamainbox[i].price);
					};
				};
				_this.amount(envent);
				//				_this.Obtain(envent);
				_this.SalePriceDatapush(envent);
				_this.PurchaseData = null;
			},
			Obtain(codetype) { //获取止盈和止损手续费等
				var _this = this; //get_lever
				_this.$http.post(_this.$http.get_lever, {
					code: codetype
				}).then(function(response) {
					if(response.data.status == "200") {
						_this.marketPurchase.leverage = Number(response.data.data.leverage);
						_this.marketPurchase.spread = Number(response.data.data.spread); //点差
						_this.marketPurchase.stoploss = Number(response.data.data.stoploss); //止损
						_this.marketPurchase.stopwin = Number(response.data.data.stopwin); //止盈
						//						_this.marketPurchase.trans_fee = _this.$public.toPoint(response.data.data.trans_fee); //手续费
						_this.marketPurchase.var_price = Number(response.data.data.var_price); //最小浮动价
						_this.marketPurchase.leverage = Number(response.data.data.leverage); //杠杆
						_this.marketPurchase.num_min = Number(response.data.data.num_min); //最小购买量
					}
				}).catch(function(error) {});

			},
			amount(codetype) { //获取用户余额
				var _this = this;
				var xinxidata = {
					mobile: sessionStorage.mobile,
					code: _this.marketPurchase.code
				};
				_this.$http.post(_this.$http.xinxi, xinxidata).then(function(response) {
					if(response.data.status == "200") {
						_this.marketPurchase.wallone = Number(response.data.data.wallone); //用户余额	
						_this.marketPurchase.trans_fee = response.data.data.trans_fee; //手续费
						_this.marketPurchase.syb = response.data.data.syb; //币种数量

					}
				}).catch(function(error) {});
			},
			PriceSwitchingpurchase(type, what) { //点击买价卖价 修改
				var _this = this;
				_this.marketPurchase.buyorsell = what;
				_this.marketPurchase.PriceData = Number(_this.PurchaseData.sell[type].price);
			},
			getdatamain() { //获取数据
				var _this = this;
				if(!_this.marketPurchase.code) _this.marketPurchase.code = 'btc_usdt'; //反正数据获取不到
				$.get(_this.$http.getNewInfo, {}, function(result) {
					if(result.status == "200") {
						_this.Marketdatamain = result.data;
						_this.Marketdatamainbox = result.data;
						for(var i = 0; i < result.data.length; i++) {
							if(_this.marketPurchase.code == result.data[i].code) {
								_this.Marketdataheader = result.data[i];
								_this.marketPurchase.PriceData = Number(result.data[i].price);
								//								_this.Obtain(result.data[i].code);
								_this.amount(result.data[i].code);
							}
						}
						_this.SalePriceDatapush(_this.marketPurchase.code); //买卖价
						window.setTimeout(function() {
							_this.MainDatapush();
						}, 1500);
					};
				});
			},
			MainDatapush() { // 主区数据推送
				var connet1 = this;
				var dommain = document.getElementsByClassName('MainArea_list'),
					codedata = [],
					pricedata = [],
					changeRatedata = [];
				for(var i = 0; i < dommain.length; i++) {
					codedata[i] = dommain[i].getAttribute('data_code');
					pricedata[i] = dommain[i].children[1];
					changeRatedata[i] = dommain[i].children[2];
				};
				// 首先判断是否 支持 WebSocket
				if('WebSocket' in window) {
					connet1.MainData = new WebSocket(connet1.$http.MainwsUrl);
				} else if('MozWebSocket' in window) {
					connet1.MainData = new MozWebSocket(connet1.$http.MainwsUrl);
				} else {
					connet1.MainData = new SockJS(connet1.$http.MainskUrl);
				};
				// 打开时
				connet1.MainData.onopen = function(evnt) {
					var msg = {
						code: "all"
					};
					connet1.MainData.send(JSON.stringify(msg)); // 发送消息
				};
				// 处理消息时
				connet1.MainData.onmessage = function(evnt) {
					var datanum = JSON.parse(evnt.data);

					for(var i = 0; i < codedata.length; i++) {
						if(codedata[i] == datanum.code) {
							if(datanum.change > 0) {
								pricedata[i].innerHTML = '<span class="up">' + datanum.price + '</span>';
								// changeRatedata[i].innerHTML = datanum.changeRate;
								changeRatedata[i].innerHTML = '<span <span class="up">' + datanum.changeRate + '</span>';

							} else {
								pricedata[i].innerHTML = '<span style="color:#03be87">' + datanum.price + '</span>';
								// changeRatedata[i].innerHTML = datanum.changeRate;
								changeRatedata[i].innerHTML = '<span style="color:#03be87">' + datanum.changeRate + '</span>';
							}
							connet1.changeColor(pricedata[i], datanum.price);
						};
						if(connet1.Marketdatamainbox[i].code == datanum.code) {
							connet1.Marketdatamainbox[i] = datanum;
						};
						if(connet1.Marketdataheader.code == datanum.code) {
							connet1.Marketdataheader = datanum;
							connet1.marketPurchase.PriceData = datanum.price;
						};
					};
				};
				connet1.MainData.onerror = function(evnt) {
					console.log("  websocket.onerror");
				};
				connet1.MainData.onclose = function(evnt) {
					console.log("  websocket.onclose");
				};
			},
			changeColor(dom, num) {
				window.setTimeout(function() {
					dom.innerHTML = '<span style="">' + num + '</span>';
				}, 1500)
			},
			SalePriceDatapush(type) { // 买卖价推送

				var connet = this,
					sellbuytype = true;
				if(connet.SalePriceData) {
					connet.SalePriceData.close();
				};
				// 首先判断是否 支持 WebSocket
				if('WebSocket' in window) {
					connet.SalePriceData = new WebSocket(connet.$http.SecondSalewsUrl);
				} else if('MozWebSocket' in window) {
					connet.SalePriceData = new MozWebSocket(connet.$http.SecondSalewsUrl);
				} else {
					connet.SalePriceData = new SockJS(connet.$http.SecondSalewsUrl);
				}
				// 打开时
				connet.SalePriceData.onopen = function(evnt) {
					//					var msg = type;
					var msg = {
						code: type
					};
					// 发送消息
					connet.SalePriceData.send(JSON.stringify(msg));
				};
				// 处理消息时
				connet.SalePriceData.onmessage = function(evnt) {
					var datanum = JSON.parse(evnt.data);
					connet.PurchaseData = datanum; //join
					connet.PurchaseData.sell = datanum.asks.reverse();
					connet.PurchaseData.buy = datanum.bids;
				};
				connet.SalePriceData.onerror = function(evnt) {
					console.log("  websocket.onerror");
				};
				connet.SalePriceData.onclose = function(evnt) {
					console.log("  websocket.onclose");
				};
			},
			quanping() {
				var kine = document.getElementById('kk');
				var h = window.screen.height + 'px';
				$('iframe').height(h);
				$("#fram").contents().find("#kline_container").height(h);
				$("#fram").contents().find("#chart_overlayCanvas").height(h);

				this.fullScreen(kine);

				//监听退出全屏事件
				window.onresize = function() {
					if(!checkFull()) {
						//要执行的动作
						$('iframe').height('800px');
						$("#fram").contents().find("#kline_container").height('800px');
						$("#fram").contents().find("#chart_overlayCanvas").height('747px');
					}
				}
				function checkFull() {
					var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
					//to fix : false || undefined == undefined
					if(isFull === undefined) {
						isFull = false;
					}
					return isFull;
				}
			},
			fullScreen(el) {
				var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
					wscript;

				if(typeof rfs != "undefined" && rfs) {
					rfs.call(el);
					return;
				}

				if(typeof window.ActiveXObject != "undefined") {
					wscript = new ActiveXObject("WScript.Shell");
					if(wscript) {
						wscript.SendKeys("{F11}");
					}
				}
			}

		},
		// 路由改变时
		beforeRouteLeave(to, from, next) {
			var _this = this;
			if(_this.MainData) _this.MainData.close();
			if(_this.SalePriceData) _this.SalePriceData.close();

			next();
		},
		created: function() {
			var _this = this;
			_this.marketPurchase.code = _this.$route.query.code;
			_this.getdatamain();

			window.scrollTo(0, 0); //回到顶部
		},
		components: {
			"Purchase": Purchase,
			"Sellout": Sellout,
			"Quotation": Quotation,
			"Quotationheader": Quotationheader,
			"bbOrder": bbOrder

		}
	}
</script>